<script setup>
import { getLikeListAPI } from '@/apis/member'
import { onMounted, ref } from 'vue'
import GoodsItem from '@/views/Home/components/GoodsItem.vue'
import { useLoginStore } from '@/stores/login'
const loginStore = useLoginStore()
const likeList = ref([])
const loading = ref(true)
// 猜你喜欢
const likeListApI = async () => {
  const res = await getLikeListAPI({ limt: 4 })
  likeList.value = res.result
  loading.value = false
}
onMounted(() => likeListApI())

// 头像url
const avatarUrl = ref('')
// 获取文件选择 input
const fileInput = ref(null)
// 点击头像时，触发 input
const selectFile = () => {
  fileInput.value.click()
}
// 文件选择后回调
const onFileChange = (e) => {
  const file = e.target.files[0]
  if (file) {
    avatarUrl.value = URL.createObjectURL(file)
    localStorage.setItem('imgUrl', JSON.stringify(avatarUrl.value))
  }
}

if (localStorage.getItem('imgUrl')) {
  avatarUrl.value = JSON.parse(localStorage.getItem('imgUrl'))
}
</script>

<template>
  <div class="home-overview">
    <!-- 用户信息 -->
    <div class="user-meta">
      <div class="avatar-wrapper" @click="selectFile">
        <img v-if="avatarUrl" class="avatar" :src="avatarUrl" />
        <!-- 如果没有头像，显示文字 -->
        <span v-else class="avatar-placeholder">选择头像</span>
        <!-- 隐藏的文件选择框 -->
        <input
          type="file"
          ref="fileInput"
          accept="image/*"
          @change="onFileChange"
          style="display: none"
        />
      </div>
      <h4>{{ loginStore.user.account }}</h4>
    </div>
    <div class="item">
      <a href="javascript:;">
        <span class="iconfont icon-hy"></span>
        <p>会员中心</p>
      </a>
      <a href="javascript:;">
        <span class="iconfont icon-aq"></span>
        <p>安全设置</p>
      </a>
      <router-link to="/member/order">
        <span class="iconfont icon-dw"></span>
        <p>地址管理</p>
      </router-link>
    </div>
  </div>
  <div class="like-container">
    <div class="home-panel">
      <div class="header">
        <h4 data-v-bcb266e0="">猜你喜欢</h4>
      </div>
      <div class="goods-list" v-loading="loading">
        <GoodsItem v-for="good in likeList" :key="good.id" :goods="good" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-overview {
  height: 132px;
  background: url(@/assets/images/center-bg.png) no-repeat center / cover;
  display: flex;

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;
    .avatar-wrapper {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid #ddd;
      margin-left: 45px;
      .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .avatar-placeholder {
        position: relative;
        top: 45px;
        left: 30px;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
      color: white;
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &:first-child {
      border-right: 1px solid #f4f4f4;
    }

    a {
      color: white;
      font-size: 16px;
      text-align: center;

      .iconfont {
        font-size: 32px;
      }

      p {
        line-height: 32px;
      }
    }
  }
}

.like-container {
  margin-top: 20px;
  border-radius: 4px;
  background-color: #fff;
}

.home-panel {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 20px;
  height: 400px;

  .header {
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    h4 {
      font-size: 22px;
      font-weight: 400;
    }
  }

  .goods-list {
    display: flex;
    height: 300px;
    justify-content: space-around;
  }
}
</style>
